<template>
    <div class="ma-content-block lg:flex justify-between">
      <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm"  @resetSearch="resetSearch">
        <template #tableSearch>
          <a-col :span="6">
            <a-form-item field="id" label="售后ID">
              <a-input v-model="searchForm.id" placeholder="请输入" :allow-clear="true" @keydown.enter="refresh"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="order" label="订单信息">
              <a-input v-model="searchForm.order" placeholder="订单ID|订单号" :allow-clear="true" @keydown.enter="refresh"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="user" label="会员账号">
              <a-input v-model="searchForm.user" placeholder="会员账号" :allow-clear="true" @keydown.enter="refresh"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="uid" label="会员UID">
              <a-input v-model="searchForm.uid" placeholder="会员UID" :allow-clear="true" @keydown.enter="refresh"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="state" label="状态">
             <sa-select :fieldName="{value:'value',label:'title'}" v-model="searchForm.state" :data="paramsData.state" placeholder="请选择" @change="refresh"></sa-select>
            </a-form-item>
          </a-col>
        </template>
        <template #id="{record}">
         <div>售后ID:{{record.id}}</div>
         <div>状态:{{record.total_state_text}}{{ record.check_msg }}</div>
        </template>
        <template #order="{record}">
         <div>订单ID:{{record.order_id}}</div>
         <div>售后地区:{{record.area_text}}</div>
        </template>
        <template #user="{record}">
         <div>UID:{{record.user_id}}</div>
         <div>会员名:{{record.user_name}}</div>
        </template>
        <template #time="{record}">
         <div>售后类型:{{record.type_text}}</div>
         <div>时间:{{record.create_time}}</div>
        </template>
        <template #sku="{record}">
          <div v-for="(itm,idx) in record.sku_list" :key="idx">
            <div>{{ itm.sku_name }}({{ itm.num }})</div>
          </div>
        </template>
        <template #goods="{record}">
          <div v-for="(itm,idx) in record.sku_list" :key="idx">
            <div>{{ itm.goods_name }}({{ itm.num }})</div>
          </div>
        </template>
        <template #number="{record}">
            <div>{{ record.sku_receive_count }}/{{ record.sku_count }}</div>
        </template>
        <template #attach="{record}">
          <div v-if="record.img_arr?.length>0">
            <a-button size="mini" type="outline" @click="detail(record)">查看</a-button>
          </div>
          <div v-else>无</div>
        </template>
        <template #operationAfterExtend="{record}">
          <a-button type="primary" size="mini" shape="round" @click="detail(record)">详情</a-button>
          <!-- 91 -->
          <a-button v-if="record.can_sign==1" type="primary" size="mini" shape="round" class="yellow_color" @click="sign(record)">签收</a-button>
        </template>
      </sa-table>
      <!-- 编辑表单 -->
      <edit-form ref="editRef" @success="refresh" />
      <sign-for ref="signRef" @success="refresh" />
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref, reactive, computed,watch } from 'vue'
  import AsApi from '@/api/system/afterSale'
  import SaTable from '@cps/sa-table/index.vue'
  import SaSelect from '@cps/sa-select/index.vue'
  import { Message } from '@arco-design/web-vue'
  import { throttle } from 'lodash';
  import tool from '@/utils/tool'
  import EditForm from './detail.vue'
  import signFor from './signFor.vue'
  const crudRef = ref()
  const editRef = ref()
  const signRef=ref()
  const searchForm = ref({
    order:'',
    user:'',
    state:99,
    uid:'',
    id:'',
  })  
  const options = reactive({
    api: AsApi.back_sign_list,//表格数据接口
    operationColumnWidth: 180,//操作欄
    showSearch:true,
    columnAlign: 'left',
    pageSimple: false,//是否展示操作欄有 以及工具欄
    isTreeTable:false,
    showLine:false,
    add: {//頂部新增按鈕
      show: false,
      auth: ['/core/menu/save'],
      func: async () => {
        editRef.value?.open()
      },
    },
    edit: {//操作欄编辑按鈕
      show: false,
      auth: ['/core/menu/update'],
      func: async (record) => {
        editRef.value?.open('edit',record)
        editRef.value?.setFormData(record)
      },
    },
    isExpand: false,//展開所有子樹
  })
  
  const columns = reactive([
    { title: 'ID|状态', dataIndex: 'id', width: 200 },
    { title: '订单号', dataIndex: 'order', width: 180 },
    { title: '订单会员', dataIndex: 'user', width: 180 },
    { title: '类型｜时间', dataIndex: 'time', width: 200 },
    { title: 'SKU', dataIndex: 'sku', width: 230 },
    { title: '商品', dataIndex: 'goods', width: 230 },
    { title: '数量', dataIndex: 'number', width: 180 },
    { title: '问题描述', dataIndex: 'describe', width: 180 },
    { title: '附件', dataIndex: 'attach', width: 120 },
  ])
  
  const initPage = async () => { 

  }
  const detail=async(record)=>{
    editRef.value?.open(record)
    editRef.value?.getData(record.id)
  }
  const sign=(DATA)=>{
    signRef.value?.open(DATA)
  }
  const paramsData=ref({})
  const getParams=async()=>{
    const {data}=await AsApi.back_sign_list_params()
    paramsData.value={...data}
    paramsData.value.state=tool.simpleTransformArray(data.state)
    paramsData.value.state.unshift({value:99,title:'全部'})
    console.log('1',paramsData.value);
  }
  const refresh = async () => {
    crudRef.value?.refresh()
  }
  const resetSearch=()=>{
    
  }
  onMounted(async () => {
    initPage()
    refresh()
    getParams()
  })
  </script>
  
  <style scoped>
  .icon {
    width: 1em;
  }
  </style>
  